//
// Buttons 
//

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}

.btn-icons {
  display: flex;
  align-items: center;
  i {
    font-size: 20px;
  }
}

//
// icon-btn in Modal
//

.icon-btn {
  border: 0;
  display: flex;
  align-items: center;
  padding: 3px 0.5rem;
  background: transparent;
  cursor: pointer;
  @include hover-focus {
    outline: 0;
    color: theme-color("primary");
  }
}

.icon-btn-danger {
  @include hover-focus {
    color: theme-color("danger");
  }
}

// 
// loading
// 

@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.btn-loading {
  display: flex;
  justify-content: center;
  > div {
    background-color: #fff;
    width: 1rem;
    height: 1rem;
    margin: 4px;
    border-radius: 100%;
    animation-fill-mode: both;
    border: 2px solid #fff;
    border-bottom-color: transparent;
    background: transparent !important;
    display: inline-block;
    animation: rotate 0.75s 0s linear infinite;
  }
}

// 自定义“圆角”btn
.btn-custom-sm {
  border-radius: 1rem;
}

.btn-custom {
  border-radius: 19px;
}

// 包含文字和icon的btn
.btn-flex {
  display: flex;
  align-items: center;
  margin: auto;
}
